import type { FC } from "react";
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined
  } from '@ant-design/icons';
  import { Button, Layout ,Avatar} from 'antd';
import useAppStore ,{setCollapsed,selectCollapsed}from "@/store/app-store";
import useUserStore,{ selectName,selectAvatar } from "@/store/user-store";
import LogOut from "@/components//root/logout";
const { Header} = Layout;
import style from '@/components/root/css/header.module.less'
import RootBreadcrumb from "@/components/root/breadcrumb";


const RootHeader:FC =() =>{
    //zustand中获取全局数据
    const collapsed =useAppStore(selectCollapsed)
    const name = useUserStore(selectName)
    const avatar = useUserStore(selectAvatar)
    return (
        <>
        <Header className={style.container}>
          <div className={style.boxLeft}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            className={style.btnCollapsed}
          />
          <span>欢迎:{name},当前为:</span>
          {/* 面包屑组件 */}
          <RootBreadcrumb/>
          </div>

          <div>
            {/*头像*/}
            {avatar ? <Avatar src={avatar}/> : <Avatar icon={<UserOutlined />}/> }
             {/* 退出按钮 */}
             <LogOut/>
          </div>
        </Header>
        </>
    )
}


export default RootHeader